<template>
  <div>
    <div class="cmember">
      <div class="cmember__tip">
        开启会员功能后，商家可以依据客户设置不同类的会员卡，进行会员卡分类管理，同时会员卡储值功能帮助商家快速回笼资金，充实资金链。
        <br />
        <span>注意：会员功能关闭后，小程序端会员将不再显示。</span>
      </div>
      <div class="cmember__switch">
        <el-switch
          @change="handelSwitch"
          v-model="memberSwitch"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </div>
    </div>
    <el-tabs
      class="cmember__tabs"
      v-model="activeTab"
      @tab-click="handleTabClick"
    >
      <el-tab-pane label="会员列表" name="list">
        <MemberList :key="listKey" />
      </el-tab-pane>
      <el-tab-pane label="会员卡" name="card">
        <MemberCard :key="cardKey" />
      </el-tab-pane>
      <el-tab-pane label="会员权益" name="equity">
        <MemberRequity :key="equityKey" />
      </el-tab-pane>
      <el-tab-pane label="储值管理" name="store">
        <MemberStore
          :key="storeKey"
          ref="memberStoreRef"
          :memberSwitch="memberSwitch"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import MemberList from "./components/memberTabs/MemberList.vue";
import MemberStore from "./components/memberTabs/MemberStore.vue";
import MemberCard from "./components/memberTabs/MemberCard.vue";
import MemberRequity from "./components/memberTabs/MemberRequity.vue";
import {
  setMemberCardInfoStatus,
  getMemberCardInfoSwitch,
} from "@/api/customer/member";

@Component({
  components: {
    MemberList,
    MemberStore,
    MemberCard,
    MemberRequity,
  },
})
export default class Member extends Vue {
  @Ref() readonly memberStoreRef;

  // 会员功能开关
  memberSwitch = 1;

  listKey = parseInt(Math.random() * 10000 + "");

  cardKey = parseInt(Math.random() * 10000 + "");

  quityKey = parseInt(Math.random() * 10000 + "");

  storeKey = parseInt(Math.random() * 10000 + "");

  equityKey = parseInt(Math.random() * 10000 + "");

  // 选中的tab
  activeTab = "list";

  created() {
    getMemberCardInfoSwitch(null).then(res => {
      const memberSwitchObj = (res.data || []).filter(
        v => v.memberModel === 0,
      )[0];
      this.memberSwitch = memberSwitchObj ? memberSwitchObj.state : 0;
      !res.data && this.memberStoreRef.closeSwitch();
    });
  }

  // tab切换
  handleTabClick(tab) {
    this.activeTab = tab.name;
    this[`${tab.name}Key`] = parseInt(Math.random() * 10000 + "");
  }

  handelSwitch(v) {
    if (v === 0) {
      this.$confirm(
        "关闭会员功能后小程序端会员及其他优惠功能将关闭，不影响之前购买的会员卡使用，确定关闭吗?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        },
      )
        .then(() => {
          setMemberCardInfoStatus({ memberCardInfoSwitch: 0, memberModel: 0 })
            .then(this.memberStoreRef.closeSwitch)
            .catch(() => {
              this.memberSwitch = 1;
            });
        })
        .catch(() => {
          this.memberSwitch = 1;
        });
    } else {
      setMemberCardInfoStatus({
        memberCardInfoSwitch: 1,
        memberModel: 0,
      }).catch(res => {
        this.$message({
          type: "error",
          message: res,
        });
        this.memberSwitch = 0;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@include b(cmember) {
  padding: 12px 24px;
  margin-bottom: 30px;
  overflow: hidden;
  background: rgb(244, 252, 255);
  > div {
    float: left;
  }
  @include e(tip) {
    width: 80%;
    > span {
      display: inline-block;
      margin-top: 12px;
      color: red;
    }
  }
  @include e(switch) {
    width: 15%;
    margin-left: 5%;
  }
  // @include e(tabs) {
  //   /deep/ .el-tabs__active-bar.is-top {
  //     width: 56px !important;
  //   }
  // }
}
@include b(cmember__tabs) {
  /deep/.el-tabs__nav-wrap::after {
    background-color: #f5f5f5;
  }
}
</style>
